<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/include.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <div >
                <el-input v-model="searchForm.name" placeholder="名称模糊搜索" clearable size="mini" style="width: 200px;"></el-input>

                <span >
                    <button @click="search" type="button" class="el-button filter-item el-button--success el-button--mini">
                        <i class="el-icon-search"></i><span>搜索</span>
                    </button>
                    <button v-if="showButtonAdd" @click="toAddTop" type="button" class="el-button el-button--primary el-button--mini">
                        <i class="el-icon-plus"></i><span>新增一级部门</span>
                    </button>
                </span>
            </div>

        </div>

        <!-- 懒加载刷新问题搞不定，不用懒加载了-->
        <div style="margin-top: 5px;">
            <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                v-loading="loading"
                row-key="id"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序">
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            :active-value="1"
                            :inactive-value="0"
                            inactive-color="#C0CCDA"
                            @change="changeStatus($event,scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
                <el-table-column
                        label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.createdTime | dateTimeFormat('yyyy-MM-dd HH:mm:ss')}}
                    </template>
                </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button v-if="showButtonUpdate" @click="toModify(scope.row)" type="primary" icon="el-icon-edit" size="mini" title="修改"></el-button>
                    <el-button v-if="showButtonAdd" @click="toAdd(scope.row)" type="primary" icon="el-icon-circle-plus-outline" size="mini" title="新增"></el-button>
                    <template v-if="scope.row.children == null">
                        <el-button v-if="showButtonDelete" type="danger" icon="el-icon-delete" size="mini" title="删除" @click="del(scope.row.id)"></el-button>
                    </template>
                </template>

            </el-table-column>

        </el-table>
        </div>

        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                width="55%">

            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-editForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="editForm.sort" :min="1" :max="999" ></el-input-number>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <template v-for="item in statuses">
                        <el-tooltip content="禁用时,该部门有子部门,会连其一起禁用" placement="top">
                            <el-radio  v-model="editForm.status" :label="item.value">{{item.label}}</el-radio>
                        </el-tooltip>
                    </template>
                </el-form-item>
                <el-form-item label="上级部门">
                    <treeselect v-model="editForm.parentId" :options="departmentTreeSelect" :clearable="false" placeholder="所属部门"/>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                &nbsp;
                <el-button type="primary" @click="submitForm">确 定</el-button>
                &nbsp;
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>


    <script>
        Vue.component('treeselect', VueTreeselect.Treeselect);
        let switchEnum = MY_ENUM.getElOptions("Switch").sort(COMPARE_DESC("value"));

        let vm = new Vue({
            el: '#app',
            data: {
                tableData: [],
                departments: [],
                searchForm: {
                    name: "",
                    path: ""
                },
                dialogVisible: false,
                dialogTitle: "",
                editForm: {

                },
                rules: {
                    name: [{ required: true, trigger: 'blur', message: '名称不能为空' }],
                },
                loading: false,
                statuses: switchEnum,
                departmentTreeSelect: [],

            },
            methods: {
                submitForm() {
                    let that = this;
                    myConfirm("确定提交？", function () {
                        showLoading("保存中....");
                        let url = BASE_PATH + "/department/update";
                        if (that.editForm.id === undefined || that.editForm.id === "") {
                            url = BASE_PATH + "/department/add";
                        }
                        Vue.delete(that.editForm, "createdTime");

                        myAjax({
                            type: "post",
                            url: url,
                            data: that.editForm,
                            isJson: true,
                            callback: function () {
                                hideLoading();
                                successMessage("提交成功！");
                                that.dialogVisible = false;
                                that.loadTableData();
                            }
                        })
                    });
                },
                search(){
                    this.loadTableData();
                },
                loadTableData(){
                    let that = this;
                    this.loading = true;
                    myAjax({
                        type: "get",
                        url: BASE_PATH + "/department/list",
                        data: {
                            name: this.searchForm.name,
                        },
                        callback: function (data) {
                            that.departments = JSON.parse(JSON.stringify(data));
                            that.tableData = toTree(data);
                            that.loading = false;
                        }
                    });
                },
                loadDepartmentTreeSelect(obj){
                    let that = this;
                    let data = JSON.parse(JSON.stringify(that.departments));

                    if (obj !== undefined) {
                        // 将当前修改的值设置为不可选自己 isDisabled: true
                        for (let i = 0; i < data.length; i++) {
                            data[i].isDisabled = data[i].id === obj.id;
                        }
                    }


                    // 添加label属性 把name值赋给它。
                    for (let i = 0; i < data.length; i++) {
                        data[i].label = data[i].name;
                    }

                    that.departmentTreeSelect = toTree(data);
                    that.departmentTreeSelect.push({id: 0, label: "顶级部门"});
                },
                toModify(obj){
                    this.dialogTitle = "编辑部门";
                    this.editForm = JSON.parse(JSON.stringify(obj));

                    this.loadDepartmentTreeSelect(obj);

                    this.dialogVisible = true;
                },
                toAdd(parent){
                    this.dialogTitle = "新增部门";
                    this.editForm = {
                        parentId: parent.id,
                        parentName: parent.name,
                        sort: 999,
                        status: this.statuses[0].value
                    };

                    this.loadDepartmentTreeSelect();

                    this.dialogVisible = true;
                },
                toAddTop() {
                    let obj = {
                        id: 0,
                        name: "顶级部门"
                    };
                    this.toAdd(obj);
                },
                del(id) {
                    let that = this;
                    myConfirm("确定删除？", function () {
                        showLoading("保存中....");
                        let settings = {
                            type: "post",
                            url: BASE_PATH + "/department/delete",
                            data: {id : id},
                            callback: function () {
                                hideLoading();
                                successMessage("删除成功！");
                                that.loadTableData();
                            }
                        };
                        myAjax(settings);
                    });
                },
                changeStatus(e,row) {
                    let mes = "";
                    if (e === 0 && row.children) {
                        mes = "禁用该部门会连其所有子部门一起禁用，";
                    }
                    let that = this;
                    myConfirm(mes + "确定提交？", function () {
                        showLoading("提交中...");
                        myAjax({
                            type: "post",
                            url: BASE_PATH + "/department/updateStatus",
                            data: row,
                            isJson: true,
                            callback: function () {
                                hideLoading();
                                successMessage("提交成功！");
                                that.loadTableData();
                            },
                            errorCallback: function (res) {
                                errorMessage(res.responseJSON.message);
                                that.reSetStatus (e,row);
                            }
                        })
                    }, function () {
                        that.reSetStatus (e,row);
                    });
                },
                reSetStatus (e,row) {
                    let that = this;
                    let departments = JSON.parse(JSON.stringify(that.departments));
                    for (let i = 0; i < departments.length; i++) {
                        if(departments[i].id === row.id) {
                            departments[i].status = (e === 1 ? 0 : 1);
                            break;
                        }
                    }
                    that.tableData = toTree(departments);
                }
            },
            created:function () {
                this.loadTableData();
                this.showButtonAdd = parent.checkPermissionByName("部门添加");
                this.showButtonUpdate = parent.checkPermissionByName("部门修改");
                this.showButtonDelete = parent.checkPermissionByName("部门删除");
            },
        })
    </script>
</body>
</html>
